<template>
  <div class="homePage iconfont">
    <div class="header">
      <p>华晟天弘</p>
      <p class="icon-icon-" @click="isPopUps=!isPopUps" ></p>
    </div>
    <div v-if="isPopUps" class="popUps" style="z-index: 999" @touchmove="closePop"  @click="closePop">
      <div class="popBox" @click.stop="">
        <div class="popList ">
          <div class="popTit popAcitve">
            <span>金融服务</span>
            <img class="" src="./../../assets/img/pops/pop3.png" alt="">
          </div>
          <router-link tag="p"  class="canClick" to="dashboard">汽车金融
          </router-link>
          <p >消费金融
          </p>
          <router-link tag="p" class="canClick"  to="supplyChain">供应链金融
          </router-link>
          <p  >融资租凭
          </p>
          <p >IPO服务
          </p>
          <p  >互联网+通信互联
          </p>
        </div>
        <router-link tag="div"  class="popTit" to="newslist"><span>新闻资讯</span> <img class="" src="./../../assets/img/pops/pop1.png" alt="">
        </router-link>
        <router-link tag="div"  class="popTit" to="aboutus"><span>关于我们</span> <img class="" src="./../../assets/img/pops/pop2.png" alt="">
        </router-link>
        <router-link tag="div"  class="popTit" to="recruitment"><span>招聘英才</span> <img class="" src="./../../assets/img/pops/pop4.png" alt="">
        </router-link>
      </div>
    </div>
    <div class="banner">
      <swiper :options="swiperOption" v-if="isShowBanner">
        <!-- slides -->
        <swiper-slide :key="index" v-for="(item,index) in slides.data"><img :src="item.path" @click="bannerHref(item.link)" alt=""></swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
    </div>
    <div class="main">
      <div class="item">
        <div class="title">
          <h3>业务介绍</h3>
          <p>BUSINESS INTRODUCTION</p>
        </div>
        <ul>
          <router-link tag="li" to="dashboard">
            <img class="icon" src="./../../assets/img/home/qcjr_red.png" alt=""/>
            <h5>汽车金融</h5>
            <p>提供车辆融资租赁，车辆保险分期等特色金融服务，缓解客户资金压力</p>
          </router-link>
          <li @click="changeTip">
            <img class="icon" src="./../../assets/img/home/xfjr_gray.png" alt=""/>
            <h5>消费金融</h5>
            <p>针对用户开展各类消费分期产品及增值服务，应对复杂情况下的各类融资需求</p>
          </li>
          <li @click="changeTip">
            <img class="icon" src="./../../assets/img/home/rzzp_gray.png" alt=""/>
            <h5>融资租赁</h5>
            <p>解决企业无后顾之忧，专业人做专业事，安心研发新产品，拓展市场</p>
          </li>
          <li @click="changeTip">
            <img class="icon" src="./../../assets/img/home/ipo_gray.png" alt=""/>
            <h5>IPO</h5>
            <p>提供系统性、专业化的解决方案，实现投资人的财富增长</p>
          </li>
          <router-link tag="li" to="supplyChain">
          <img class="icon" src="./../../assets/img/home/gyljr_gray.png" alt=""/>
            <h5>供应链金融</h5>
            <p>业务导向为基础挖掘产业链优势保证平台可用性，低成本高效能以金融科技为助力</p>
          </router-link>
          <li @click="changeTip">
            <img class="icon" src="./../../assets/img/home/hlw+_gray.png" alt=""/>
            <h5>互联网+通信互联</h5>
            <p>通信互联，协同互补，提供通讯平台中继线路引流服务</p>
          </li>
        </ul>
      </div>
      <div class="item">
        <div class="title">
          <h3>公司简介</h3>
          <p>COMPANY PROFILE</p>
        </div>
        <h4>华晟（深圳）金融服务有限公司</h4>
        <router-link tag="p" to="aboutus">华晟（深圳）金融服务有限公司，成立于2016年，公司位于深圳，注册资本1000万。<span>打造中小企业综合金融服务平台</span>，以便捷、高效、透明的金融服务企业。通过<span>客户体验、技术、资源</span>三...</router-link>
        <img class="imgBg" src="./../../assets/img/home/summer.png" alt=""/>
      </div>
      <div class="item">
        <div class="title">
          <h3>业务介绍</h3>
          <p>BUSINESS INTRODUCTION</p>
        </div>
        <div class="AdvantageText">
          <img class="imgCar" src="./../../assets/img/home/car.png" alt=""/>
          <h3>操作灵活简便</h3>
          <p>01，要体现在租赁客车（网约车）及新能源租赁货车、以租代购个人借款模式，风险分散、平台运营 企业回购担保，体现 C 端使用人征信、逾期可控，坏账没有。</p>
          <p>02，企业车辆可以以公司进件，也可以法人或股东进件，操作灵活简便。</p>
          <p>03，其次私家车，平行进口车，易于标准化操作，可做信用卡下沉客户，增加发卡量。</p>
        </div>
      </div>
      <div class="swiperTwo">
        <div class="swiperContent">
            <swiper :options="swiperOption2">
              <swiper-slide :key="index" v-for="(item,index) in AdvantageList">
                <div class="AdvantageList">
                  <img :src="item.src" alt="">
                  <h3>{{item.num}}</h3>
                  <h4>{{item.china}}</h4>
                  <p>{{item.eng}}</p>
                </div>
              </swiper-slide>
              <div class="swiper-pagination"  slot="pagination"></div>
            </swiper>
          </div>
      </div>
      <div class="item es">
        <div class="title es">
          <h3>新闻资讯</h3>
          <p>NEWS INFORMATION</p>
          <router-link to="newslist">更多</router-link>
        </div>
        <div class="newsChoose" v-for="item in news.slice(0,2)"  @click="goDetail(item.id)">
          <h4 class="es">{{item.title}}</h4>
          <p>{{item.excerpt}}</p>
          <div class="time">
            <i class="iconfont icon-shijian"></i>{{item.created_at}}
          </div>
        </div>
      </div>
      <div class="item">
        <div class="title es2">
          <h3>合作伙伴</h3>
          <p>PARTNER</p>
        </div>
        <div class="banks">
            <img class="bank" src="./../../assets/img/banks/bank1.png" alt="">
            <img class="bank" src="./../../assets/img/banks/bank2.png" alt="">
            <img class="bank" src="./../../assets/img/banks/bank3.png" alt="">
            <img class="bank" src="./../../assets/img/banks/bank4.png" alt="">
            <img class="bank" src="./../../assets/img/banks/bank5.png" alt="">
            <img class="bank" src="./../../assets/img/banks/bank6.png" alt="">
            <img class="bank" src="./../../assets/img/banks/bank7.png" alt="">
            <img class="bank" src="./../../assets/img/banks/bank8.png" alt="">
            <img class="bank" src="./../../assets/img/banks/bank9.png" alt="">
            <img class="bank" src="./../../assets/img/banks/bank10.png" alt="">
            <img class="bank" src="./../../assets/img/banks/bank11.png" alt="">
            <img class="bank" src="./../../assets/img/banks/bank12.png" alt="">
        </div>
      </div>
    </div>
    <div class="bg" v-if="isTip" @click="isTip=false">
      <div class="tip">
        <h3>0755-23288796</h3>
        <p>请拨打客服电话</p>
      </div>
    </div>
  </div>
</template>

<script>
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'

  export default {
    name: "HomePage",
    data() {
      return {
        loading:true,
        isTip:false,
        isPopUps:false,
        AdvantageList:[
          {
            src:require('./../../assets/img/home/PathCopy@2x.png'),
            num:'01',
            china:'资金稳定',
            eng:'Stable capital'
          },
          {
            src:require('./../../assets/img/home/biaozhunhua@2x.png'),
            num:'02',
            china:'标准化率高',
            eng:'High standard rate'
          },
          {
            src:require('./../../assets/img/home/shenpi@2x.png'),
            num:'03',
            china:'审批迅速',
            eng:'Rapid approval'
          },
          {
            src:require('./../../assets/img/home/lixidi@2x.png'),
            num:'04',
            china:'利息低',
            eng:'Low interest'
          },
          {
            src:require('./../../assets/img/home/fangkuan@2x.png'),
            num:'05',
            china:'放款快',
            eng:'Fast money'
          },
          {
            src:require('./../../assets/img/home/yuqi@2x.png'),
            num:'06',
            china:'逾期风险低',
            eng:'Low overdue risk'
          },
          {
            src:require('./../../assets/img/home/9@2x.png'),
            num:'07',
            china:'资金安全',
            eng:'Financial security'
          },
          {
            src:require('./../../assets/img/home/liucheng@2x.png'),
            num:'08',
            china:'流程简单',
            eng:'Simple process'
          }
        ],
        swiperOption: {
          loop:true,
          type: 'bullets',
          spaceBetween: 30,
          autoplay: {
            delay: 2000,
            disableOnInteraction: false,
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
            dynamicBullets:true
          }
        },

        swiperOption2: {
          loop:true,
          type: 'bullets',
          spaceBetween: '3.2%',
          slidesPerView: 2,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
            dynamicBullets:true
          }
        },
        slides:{
          data:[]
        },
        news:[],
        isShowBanner:false
      }
    },
    mounted(){
      this.$api.getBanner().then((res)=>{
        this.slides= res.data;
        this.isShowBanner = true;
      });
      this.$api.getArticles().then((res)=>{
                  this.news = res.data.data;
                })
    },
    methods:{
      goDetail(id){
        console.log(id)
        this.$router.push({path:'newsdetail',query:{id:id}})
      },
      bannerHref(href){
        if(href){
          window.location.href = href
        }
      },
      changeTip(){
        this.isTip = true;
      },
      closePop(){
        this.isPopUps =false;
      }
    },
    components: {
      swiper,
      swiperSlide
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .swiper-pagination-bullet{
    width: 16px;
    height: 16px;
    background: #fff;
  }
  .bg {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;

    .tip {
      width: 330px;
      height: 200px;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 64px 0 0 0;
      text-align: center;

      h3 {
        font-size: 36px;
        font-family: Arial-BoldMT;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        line-height: 36px;
        margin: 0 0 22px 0;
      }

      p {
        font-size: 24px;
        font-family: SourceHanSansCN-Regular;
        font-weight: 400;
        color: rgba(128, 128, 128, 1);
        line-height: 24px;
      }
    }
  }
  .homePage {
    width: 100%;
    background: #FAFAFA;
    font-family: SourceHanSansCN-Regular;
    .header {
      height: 88px;
      font-size: 38px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      margin: 0 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      p:nth-child(2) {
        width: 37px;
        height: 37px;
        color: #333333;
      }
    }

    .popUps {
      position: fixed;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      .popBox{
        float: right;
        width:304px;
        height:100%;
        background:rgba(247,248,250,1);
        z-index: 6;
        display: block;
        .popTit {
          margin: 0 auto;
          position: relative;
          font-size: 30px;
          font-family: SourceHanSansCN-Regular;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 29px;
          padding: 30px 0;
          text-align: center;
          img{
            width: 40px;
            height: 40px;
            vertical-align: middle;
          }
        }
        .popList{
            text-align: right;
          p{
            margin:15px 70px 15px 0 ;
            font-size:24px;
            font-family:SourceHanSansCN-Regular;
            font-weight:400;
            color:rgba(153,153,153,1);
            line-height:23px;
          }
          .canClick{
            color: rgba(231, 31, 24, 1);
          }
          .popAcitve{
            background-color: red;
            color: #ffffff;
          }
        }
      }
    }
    .banner{
      width: 100%;
      img{
        width: 100%;
        display: block;
      }
    }
    .main{
      width: 100%;
      padding: 0 30px 134px 30px;
      .item{
        width: 100%;
        &.es{
          margin: 430px 0 0 0;
        }
        .title{
          padding: 90px 0 60px 0;
          text-align: center;
          &.es2{
            padding: 30px 0;
          }
          &.es{
            padding: 0;
            margin: 84px 0 60px 0;
            text-align: left;
            position: relative;
            a{
              font-size:36px;
              font-family:SourceHanSansCN-Regular;
              font-weight:400;
              color:rgba(153,153,153,1);
              line-height:36px;
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
            }
          }
          h3{
            font-size:36px;
            font-weight:bold;
            color:rgba(51,51,51,1);
            line-height:36px;
            font-family:SourceHanSansCN-Bold;
          }
          p{
            font-size:20px;
            font-weight:bold;
            color:rgba(51,51,51,1);
            line-height:20px;
            margin: 7px 0 0 0;
            font-family:Arial-BoldMT;
          }
        }
        h4{
          font-size:30px;
          font-weight:400;
          color:rgba(51,51,51,1);
          line-height:32px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          &.es{
            margin: 0 0 24px 0;
          }
        }
        >p{
          font-size:24px;
          font-weight:400;
          color:rgba(128,128,128,1);
          line-height:36px;
          margin: 31px 0 30px 0;
          span{
            color: #333333;
          }
        }
        .imgBg{
          width: 100%;
          display: block;
        }
        ul{
          width: 100%;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          li{
            width: 300px;
            text-align: center;
            .icon{
              width: 70px;
              height: 70px;
              display: block;
              margin: 0 auto;
            }
            >h5{
              font-size:30px;
              font-weight:400;
              color:rgba(51,51,51,1);
              line-height:30px;
              margin:20px 0 18px 0;
            }
            >p{
              font-size:24px;
              font-weight:400;
              color:rgba(128,128,128,1);
              line-height:36px;
              opacity:0.7;
              margin: 0 0 36px 0;
            }
          }
        }
        .newsChoose{
          p{
            font-size:24px;
            font-weight:400;
            color:rgba(128,128,128,1);
            line-height:36px;
            display: -webkit-box;
            /*! autoprefixer: off */
            -webkit-box-orient: vertical;
            /* autoprefixer: on */
            -webkit-line-clamp:3;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
        .banks{
          width: 100%;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          img{
            width: 192px;
            height: 111px;
            margin: 0 0 10px 0;
          }
        }
        .time{
          height: 14px;
          margin: 36px 0 60px 0;
          font-size:18px;
          font-weight:bold;
          color:rgba(0,0,0,1);
          line-height:14px;
          opacity:0.7;
          font-family:Arial-BoldMT;

          >i{
            width: 14px;
            height: 14px;
            font-size: 14px;
            margin: 0 10px 0 0;
          }
        }
      }
      .AdvantageText{
        width: 690px;
        margin: 0 auto;
        padding:0 51px 51px 51px;
        position: relative;
        background-color: #fff;
        z-index: 999;
        img{
          width: 497px;
          margin:0 auto;
        }
        h3{
          font-size:30px;
          font-family:SourceHanSansCN-Regular;
          font-weight:400;
          color:rgba(51,51,51,1);
          line-height:29px;
          margin: 49px 0 29px 0;

        }
        p{
          font-size:24px;
          font-family:SourceHanSansCN-Regular;
          font-weight:400;
          color:rgba(128,128,128,1);
          line-height:36px;
        }
      }
    }
    .swiperTwo{
      width: 100%;
      height: 502px;
      position: absolute;
      left: 0;
      background-color: red;
      margin: -162px 0 0 0;
      padding:193px 30px 0 30px;
      /deep/ .swiper-pagination-bullet{
        width: 20px;
        height: 20px;
        background: #fff;
        opacity: 0.7;
      }
      /deep/ .swiper-pagination-bullet-active-main{
        opacity: 1;
      }
      .swiper-pagination{
        bottom:-44px;
      }
      .swiperContent{
        width: 100%;
        height: 300px;
        /*height: 233px;*/
        /*padding:0 30px;*/
        overflow: hidden;
      }
      /deep/ .swiper-container{
        overflow:visible;
        z-index: 999;
      }
      .AdvantageList{
        height:233px;
        background: #F5F5F5;
        padding:30px 0 0 27px ;
        img{
          width: 57px;
          height: 57px;
          display: block;
          margin: 0 auto;
        }
        h3{
          font-size:29px;
          font-family:Roboto-Regular;
          font-weight:400;
          color:rgba(51,51,51,1);
          line-height:21px;
          margin: 26px 0 19px 0;
        }
        h4{
          font-size:30px;
          font-family:SourceHanSansCN-Regular;
          font-weight:400;
          color:rgba(51,51,51,1);
          line-height:30px;
          margin: 0 0 10px 0;
        }
        p{
          font-size:18px;
          font-family:Roboto-Regular;
          font-weight:400;
          color:rgba(153,153,153,1);
          line-height:13px;
          text-transform: uppercase;
        }
      }
      /*.AdvantageList{*/
        /*width:334px;*/
        /*height:233px;*/
        /*background:rgba(245,245,245,1);*/
        /*text-align: center;*/
        /*p{*/
          /*text-align: left;*/
          /*font-weight:400;*/
          /*color:rgba(51,51,51,1);*/
          /*margin:0 0 5px 0px;*/
        /*}*/
        /*p:nth-child(2){*/
          /*font-size:29px;*/
          /*font-family:Roboto-Regular;*/
          /*font-weight:400;*/
          /*color:rgba(51,51,51,1);*/
          /*line-height: 21px;*/
          /*margin: 0 0 19px 0;*/
        /*}*/
        /*p:nth-child(3){*/
          /*font-size:30px;*/
          /*line-height: 29px;*/
          /*font-family:SourceHanSansCN-Regular;*/
          /*margin:  0 0 9px 0;*/
        /*}*/
        /*p:nth-child(4){*/
          /*font-size:18px;*/
          /*line-height: 13px;*/
          /*font-family:Roboto-Regular;*/
          /*color:rgba(153,153,153,1);*/
          /*text-transform: uppercase;*/
        /*}*/
        /*img{*/
          /*width:57px;*/
          /*height:57px;*/
          /*border:1px solid rgba(245, 245, 245, 1);*/
        /*}*/
      /*}*/
    }
  }
</style>
